import Rectangle from './Rectangle.js';
// js/ui/Modal.js
export default class GameSetDialog {
  constructor(options = {}, textRenderer, screenAdapter, resourceManager) {
    // 默认配置
    // 默认配置
    this.config = {
      title: options.title || 20,
      width: options.width || 20,
      height: options.height || 20,
      buttonRightSpacing: options.buttonRightSpacing || 40,
      buttonWidth: options.buttonWidth || 160,
      buttonHeight: options.buttonHeight || 60,
      buttonRadius: options.buttonRadius || 8,
      buttonTopSpacing: options.buttonSpacing || 40,
      buttonColor: options.buttonColor || '#282D58',
      buttonSelectColor: options.buttonSelectColor || '#F1A039',

      onClose: options.onClose || null,
      onBtnClick: options.onBtnClick || null,

      ...options
    };

    this.screenAdapter = screenAdapter
    this.textRenderer = textRenderer
    this.resourceManager = resourceManager
    this.buttons = []
    this.isVisible = false;
    this.isDestroyed = false;

    this.initItems()
  }

  initItems() {
    this.buttons = [{
      x: 532,
      y: 230,
      title: 'MA5',
      checked: true,
      bgColor: '#F1A039',
      strokeStyle: '#fff'
    }, {
      x: 732,
      y: 230,
      title: 'MA10',
      checked: true,
      bgColor: '#F1A039',
      strokeStyle: '#fff'
    }, {
      x: 932,
      y: 230,
      title: 'MA20',
      checked: true,
      bgColor: '#F1A039',
      strokeStyle: '#fff'
    }, {
      x: 532,
      y: 330,
      title: 'MA30',
      checked: false,
      bgColor: '#282D58',
      strokeStyle: '#fff'
    }, {
      x: 732,
      y: 330,
      title: 'MA60',
      checked: false,
      bgColor: '#282D58',
      strokeStyle: '#fff'
    }, {
      x: 932,
      y: 330,
      title: 'MA90',
      checked: false,
      bgColor: '#282D58',
      strokeStyle: '#fff'
    }, {
      x: 532,
      y: 430,
      title: 'MA250',
      checked: false,
      bgColor: '#282D58',
      strokeStyle: '#fff'
    }]
  }

  show() {
    this.isVisible = true;
    this.animateShow();
  }

  hide() {
    if (this.isDestroyed || !this.isVisible) return;
    this.animateHide();
  }

  draw(ctx) {
    if (!this.isVisible || this.isDestroyed || !ctx) return;
    // 横屏奖励页面背景
    ctx.fillStyle = 'rgba(0, 0, 0, 0.6';
    ctx.fillRect(0, 0, this.screenAdapter.DESIGN_WIDTH, this.screenAdapter.DESIGN_HEIGHT);

    // 绘制背景
    const backgroundImg = this.resourceManager.getImage('gamePop');
    ctx.drawImage(backgroundImg, this.screenAdapter.DESIGN_WIDTH / 2 - backgroundImg.width / 2, this.screenAdapter.DESIGN_HEIGHT / 2 - backgroundImg.height / 2, this.config.width, this.config.height);

    this.textRenderer.drawText(this.config.title, this.screenAdapter.DESIGN_WIDTH / 2, 116, `32px ${this.textRenderer.systemFont}`, "#fff", 'center', 'top')

    this.buttons.forEach(item => {
      Rectangle.draw(ctx, item.x, item.y, this.config.buttonWidth, this.config.buttonHeight, this.config.buttonRadius, {
        strokeStyle: item.strokeStyle,
        fillStyle: item.bgColor,
        lineWidth: 2,
        title: item.title
      })
    })

    const btn = this.resourceManager.getImage('sellIcon');
    ctx.drawImage(btn, this.screenAdapter.DESIGN_WIDTH / 2 - 120, 542, 239, 88);
    this.textRenderer.drawText('确定', this.screenAdapter.DESIGN_WIDTH / 2, 575, `32px ${this.textRenderer.systemFont}`, '#ffffff', 'center', 'top')

    ctx.restore();
  }

  /**
   * 绘制按钮
   */
  drawButton(ctx, x, y, item) {
    const { buttonSize, borderRadius, borderWidth } = this.config;

    // 设置按钮样式
    let bgColor = this.config.buttonColor;
    let borderColor = this.config.buttonBorderColor;

    if (item.disabled) {
      bgColor = this.config.buttonDisabledColor;
      borderColor = this.config.buttonDisabledBorderColor;
    } else if (item.checked) {
      bgColor = this.config.buttonSelectedColor;
      borderColor = this.config.buttonSelectedBorderColor;
    } else if (item.hovered) {
      bgColor = this.config.buttonHoverColor;
      borderColor = this.config.buttonSelectedBorderColor;
    }

    // 绘制按钮背景
    ctx.fillStyle = bgColor;
    ctx.strokeStyle = borderColor;
    ctx.lineWidth = borderWidth;

    this.roundRect(ctx, x, y, buttonSize, buttonSize, borderRadius);
    ctx.fill();
    ctx.stroke();

    // 绘制勾选标记
    if (item.checked && !item.disabled) {
      this.drawCheckmark(ctx, x, y, buttonSize);
    }
  }

  /**
 * 显示动画
 */
  animateShow() {
    const startTime = Date.now();
    const duration = 200;

    const animate = () => {
      if (this.isDestroyed) return;

      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);

      this.maskOpacity = progress * 0.5;

      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    };

    animate();
  }

  /**
   * 隐藏动画
   */
  animateHide() {
    const startTime = Date.now();
    const duration = 200;
    const startOpacity = this.maskOpacity;

    const animate = () => {
      if (this.isDestroyed) return;

      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);

      this.maskOpacity = startOpacity * (1 - progress);

      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        this.isVisible = false;
        if (this.config.onClose) {
          this.config.onClose();
        }
      }
    };

    animate();
  }

  handleTouch(touchX, touchY) {
    if (!this.isVisible || this.isDestroyed) return;

    if (touchY >= 230 && touchY <= 300) {
      if (touchX >= 532 && touchX <= 692) {
        if (this.buttons[0].checked) {
          this.buttons[0].checked = false
          this.buttons[0].bgColor = this.config.buttonColor
        } else {
          this.buttons[0].checked = true
          this.buttons[0].bgColor = this.config.buttonSelectColor
        }
      } else if (touchX >= 732 && touchX <= 892) {
        if (this.buttons[1].checked) {
          this.buttons[1].checked = false
          this.buttons[1].bgColor = this.config.buttonColor
        } else {
          this.buttons[1].checked = true
          this.buttons[1].bgColor = this.config.buttonSelectColor
        }
      } else if (touchX >= 932 && touchX <= 1092) {
        if (this.buttons[2].checked) {
          this.buttons[2].checked = false
          this.buttons[2].bgColor = this.config.buttonColor
        } else {
          this.buttons[2].checked = true
          this.buttons[2].bgColor = this.config.buttonSelectColor
        }
      }
    }

    if (touchY >= 330 && touchY <= 400) {
      if (touchX >= 532 && touchX <= 692) {
        if (this.buttons[3].checked) {
          this.buttons[3].checked = false
          this.buttons[3].bgColor = this.config.buttonColor
        } else {
          this.buttons[3].checked = true
          this.buttons[3].bgColor = this.config.buttonSelectColor
        }
      } else if (touchX >= 732 && touchX <= 892) {
        if (this.buttons[4].checked) {
          this.buttons[4].checked = false
          this.buttons[4].bgColor = this.config.buttonColor
        } else {
          this.buttons[4].checked = true
          this.buttons[4].bgColor = this.config.buttonSelectColor
        }
      } else if (touchX >= 932 && touchX <= 1092) {
        if (this.buttons[5].checked) {
          this.buttons[5].checked = false
          this.buttons[5].bgColor = this.config.buttonColor
        } else {
          this.buttons[5].checked = true
          this.buttons[5].bgColor = this.config.buttonSelectColor
        }
      }
    }

    if (touchY >= 430 && touchY <= 500 && touchX >= 532 && touchX <= 692) {
      if (this.buttons[6].checked) {
        this.buttons[6].checked = false
        this.buttons[6].bgColor = this.config.buttonColor
      } else {
        this.buttons[6].checked = true
        this.buttons[6].bgColor = this.config.buttonSelectColor
      }
    }

    // 检查是否买卖按钮
    if (touchX >= 700 && touchX <= 924 && touchY >= 530 && touchY <= 602) {
      console.log('设置确定按钮')
      const checkedTitles = this.buttons
        .filter(item => item.checked === true)
        .map(item => item.title);

      this.config.onBtnClick(checkedTitles);
      this.hide()
    }

    // 检查是否点击了弹窗关闭按钮
    if (touchX >= 1246 && touchX <= 1286 && touchY >= 110 && touchY <= 150) {
      this.hide()
    }

  }
  /**
 * 销毁组件
 */
  destroy() {
    this.isDestroyed = true;
    this.isVisible = false;
  }

  /**
 * 获取统计信息
 * @returns {Object} 统计信息对象
 */
  getStats() {
    return { ...this.buttons };
  }
}
